<template>
  <div class="body-box">
             <div class="content-box">
               <div class="semi-enclosed-layout">
                 <!-- 左侧边栏 - 3个模块 -->
                 <div class="left-sidebar">
                   <div class="chart-module">
                     <dv-border-box-8>
                       <div class="chart-container">
                         <h3 class="chart-title">信息公开发文统计</h3>
                         <div class="stat-grid" id="info-publish-stat">
                           <div class="stat-row">
                             <div class="stat-item">市政府办公厅</div>
                             <div class="stat-value">9999</div>
                           </div>
                           <div class="stat-row">
                             <div class="stat-item">市科学技术局</div>
                             <div class="stat-value">3999</div>
                           </div>
                           <div class="stat-row">
                             <div class="stat-item">市劳动和社会保障局</div>
                             <div class="stat-value">5999</div>
                           </div>
                           <div class="stat-row">
                             <div class="stat-item">市劳动和社会保障局</div>
                             <div class="stat-value">7999</div>
                           </div>
                           <div class="stat-row">
                             <div class="stat-item">市发展和改革委员会</div>
                             <div class="stat-value">2999</div>
                           </div>
                           <div class="stat-row">
                             <div class="stat-item">市监察局</div>
                             <div class="stat-value">4999</div>
                           </div>
                         </div>
                       </div>
                     </dv-border-box-8>
                   </div>
                   <div class="chart-module">
                     <dv-border-box-8>
                       <div class="chart-container">
                         <h3 class="chart-title">信息公开发文排行 TOP7</h3>
                         <div class="bar-chart" id="info-publish-rank"></div>
                       </div>
                     </dv-border-box-8>
                   </div>
                   <div class="chart-module">
                     <dv-border-box-8>
                       <div class="chart-container">
                         <h3 class="chart-title">超期未受理情况</h3>
                         <div class="table-container" id="overdue-unhandled">
                           <div class="table-header">
                             <div class="header-item">未受理内容</div>
                             <div class="header-item">申请部门</div>
                             <div class="header-item">处理状态</div>
                             <div class="header-item">超期天数</div>
                           </div>
                           <div class="table-body">
                             <div class="table-row">
                               <div class="row-item">此处是未受理内容的一条信息。此处是未受...</div>
                               <div class="row-item">西红市东区办事处</div>
                               <div class="row-item status">未受理</div>
                               <div class="row-item">99</div>
                             </div>
                             <div class="table-row">
                               <div class="row-item">此处是未受理内容的一条信息。此处是未受...</div>
                               <div class="row-item">西红市西区办事处</div>
                               <div class="row-item status">未受理</div>
                               <div class="row-item">99</div>
                             </div>
                             <div class="table-row">
                               <div class="row-item">此处是未受理内容的一条信息。此处是未受...</div>
                               <div class="row-item">西红市南区办事处</div>
                               <div class="row-item status">未受理</div>
                               <div class="row-item">99</div>
                             </div>
                             <div class="table-row">
                               <div class="row-item">此处是未受理内容的一条信息。此处是未受...</div>
                               <div class="row-item">西红市北区办事处</div>
                               <div class="row-item status">未受理</div>
                               <div class="row-item">99</div>
                             </div>
                           </div>
                         </div>
                       </div>
                     </dv-border-box-8>
                   </div>
                 </div>
   
                 <!-- 中间主内容区 -->
                 <div class="main-content">
                   <div class="main-indicator">
                     <dv-border-box-12>
                       <div class="main-chart-container">
                         <h3 class="chart-title">西虹市政务新媒体监管平台</h3>
                         <div class="chart-content">
                           <div class="info-publish-summary">信息公开发文汇总</div>
                           <div class="number-block-container">
                             <div class="number-block">1</div>
                             <div class="number-block">2</div>
                             <div class="number-block">3</div>
                             <div class="number-block">4</div>
                             <div class="number-block">5</div>
                             <div class="number-block">2</div>
                           </div>
                           <div class="time-periods">
                             <div class="period-item">
                               <dv-border-box-13>
                               <div class="period-label">本月</div>
                               <div class="period-value">1234</div>
                               </dv-border-box-13>
                             </div>
                             <div class="period-item">
                               <dv-border-box-13>
                               <div class="period-label">本季</div>
                               <div class="period-value">123456</div>
                               </dv-border-box-13>
                             </div>
                             <div class="period-item">
                               <dv-border-box-13>
                               <div class="period-label">本年</div>
                               <div class="period-value">1234567</div>
                               </dv-border-box-13>
                             </div>
                           </div>
                         </div>
                       </div>
                     </dv-border-box-12>
                   </div>
                   <div class="secondary-indicators">
                     <div class="secondary-indicator">
                       <dv-border-box-8>
                         <div class="secondary-chart-container">
                           <h3 class="chart-title">政务新媒体更新排行TOP5</h3>
                           <div class="table-container" id="new-media-rank">
                             <div class="table-header">
                               <div class="header-item">排名</div>
                               <div class="header-item">名称</div>
                               <div class="header-item">类型</div>
                               <div class="header-item">最后更新时间</div>
                             </div>
                             <div class="table-body">
                               <div class="table-row">
                                 <div class="row-item rank">1</div>
                                 <div class="row-item">新媒体名称A</div>
                                 <div class="row-item">微博</div>
                                 <div class="row-item">2023-12-12</div>
                               </div>
                               <div class="table-row">
                                 <div class="row-item rank">2</div>
                                 <div class="row-item">新媒体名称B</div>
                                 <div class="row-item">微信</div>
                                 <div class="row-item">2023-12-12</div>
                               </div>
                               <div class="table-row">
                                 <div class="row-item rank">3</div>
                                 <div class="row-item">新媒体名称C</div>
                                 <div class="row-item">抖音</div>
                                 <div class="row-item">2023-12-12</div>
                               </div>
                               <div class="table-row">
                                 <div class="row-item rank">4</div>
                                 <div class="row-item">新媒体名称D</div>
                                 <div class="row-item">微信</div>
                                 <div class="row-item">2023-12-12</div>
                               </div>
                               <div class="table-row">
                                 <div class="row-item rank">5</div>
                                 <div class="row-item">新媒体名称E</div>
                                 <div class="row-item">微博</div>
                                 <div class="row-item">2023-12-12</div>
                               </div>
                             </div>
                           </div>
                         </div>
                       </dv-border-box-8>
                     </div>
                     <div class="secondary-indicator">
                       <dv-border-box-8>
                         <div class="secondary-chart-container">
                           <h3 class="chart-title">政务新媒体年度问题汇总</h3>
                           <div class="chart-content">
                             <div class="bar-chart" id="new-media-annual-issues"></div>
                           </div>
                         </div>
                       </dv-border-box-8>
                     </div>
                   </div>
                 </div>
   
                 <!-- 右侧边栏 - 3个模块 -->
                 <div class="right-sidebar">
                   <div class="chart-module">
                     <dv-border-box-8>
                       <div class="chart-container">
                         <h3 class="chart-title">政务新媒体发布数量统计</h3>
                         <div class="chart-content">
                           <div class="chart-row">
                             <div class="chart-col pie-chart" id="new-media-pie"></div>
                             <div class="chart-col stat-list">
                               <div class="stat-item">微信平台发布量：123456789</div>
                               <div class="stat-item">抖音平台发布量：123456789</div>
                               <div class="stat-item">微博平台发布量：12345678</div>
                               <div class="stat-item">其他平台发布量：123456</div>
                             </div>
                           </div>
                         </div>
                       </div>
                     </dv-border-box-8>
                   </div>
                   <div class="chart-module">
                     <dv-border-box-8>
                       <div class="chart-container">
                         <h3 class="chart-title">问题来源分布</h3>
                         <div class="chart-content">
                           <div class="chart-row">
                             <div class="chart-col radar-chart" id="problem-source"></div>
                             <div class="chart-col stat-card">
                               <div class="card-item">
                                 <span class="icon">📄</span>
                                 <span class="label">发布总量</span>
                                 <span class="value">1234567</span>
                               </div>
                               <div class="card-item">
                                 <span class="icon">📋</span>
                                 <span class="label">一般错误</span>
                                 <span class="value">1234567</span>
                               </div>
                               <div class="card-item">
                                 <span class="icon">🚨</span>
                                 <span class="label">严重错误</span>
                                 <span class="value">1234</span>
                               </div>
                             </div>
                           </div>
                         </div>
                       </div>
                     </dv-border-box-8>
                   </div>
                   <div class="chart-module">
                     <dv-border-box-8>
                       <div class="chart-container">
                         <h3 class="chart-title">政务新媒体错误监测</h3>
                         <div class="table-container" id="new-media-error">
                           <div class="table-header">
                             <div class="header-item">内容</div>
                             <div class="header-item">平台</div>
                             <div class="header-item">时间</div>
                             <div class="header-item">错误舆情</div>
                             <div class="header-item">正确舆情</div>
                           </div>
                           <div class="table-body">
                             <div class="table-row">
                               <div class="row-item">此处是一条内容，此...</div>
                               <div class="row-item">微信</div>
                               <div class="row-item">2023-12-12</div>
                               <div class="row-item status">未受理</div>
                               <div class="row-item">99</div>
                             </div>
                             <div class="table-row">
                               <div class="row-item">此处是一条内容，此...</div>
                               <div class="row-item">抖音</div>
                               <div class="row-item">2023-12-12</div>
                               <div class="row-item status">未受理</div>
                               <div class="row-item">99</div>
                             </div>
                             <div class="table-row">
                               <div class="row-item">此处是一条内容，此...</div>
                               <div class="row-item">微博</div>
                               <div class="row-item">2023-12-12</div>
                               <div class="row-item status">未受理</div>
                               <div class="row-item">99</div>
                             </div>
                             <div class="table-row">
                               <div class="row-item">此处是一条内容，此...</div>
                               <div class="row-item">其他</div>
                               <div class="row-item">2023-12-12</div>
                               <div class="row-item status">未受理</div>
                               <div class="row-item">99</div>
                             </div>
                           </div>
                         </div>
                       </div>
                     </dv-border-box-8>
                   </div>
                 </div>
               </div>
             </div>
           </div>
 </template>
 
 <script lang="ts">
 import {
   defineComponent,
   ref,
   reactive,
   onMounted,
   onUnmounted,
   nextTick
 } from 'vue'
 import * as echarts from 'echarts';
 import { formatTime } from '@/utils/index'
 import { WEEK } from '@/constant/index'
 import useDraw from '@/utils/useDraw'
 import { title, subtitle, moduleInfo } from '@/constant/index'
 import { useRouter } from 'vue-router'
 
 export default defineComponent({
   setup() {
     const lastChar = location.href.substr(location.href.length - 1)
     const tabColor = ref(lastChar)
     const decorationColors = ['#568aea', '#000000']
     const loading = ref<boolean>(true)
     const timeInfo = reactive({
       setInterval: 0,
       dateDay: '',
       dateYear: '',
       dateWeek: ''
     })
 
     const router = useRouter()
     const tiao = () => {
       router.push("/wzh2")
     }
     const tiao2 = () => {
       router.push("/wzh3")
     }
     const tiao3 = () => {
       router.push("/sjk")
     }
     const tiao4 = () => {
       router.push("/sjk1")
     }
     const tiao5 = () => {
       router.push("/sjk2")
     }
     const tiao6 = () => {
       router.push("/mhr1")
     }
     const tiao7 = () => {
       router.push("/mhr2")
     }
     const tiao8 = () => {
       router.push("/mhr3")
     }
     const tiao9 = () => {
       router.push("/st1")
     }
     const tiao10 = () => {
       router.push("/st2")
     }
     const tiao11 = () => {
       router.push("/st3")
     }
 
     const { appRef, calcRate, windowDraw, unWindowDraw } = useDraw()
 
     const initCharts = () => {
       // 信息公开发文排行 TOP7 柱状图
       const rankDom = document.getElementById('info-publish-rank');
       if (rankDom) {
         const chart = echarts.init(rankDom as HTMLDivElement);
         const option: echarts.EChartOption = {
           backgroundColor: 'rgba(0, 0, 0, 0)',
           tooltip: {
             trigger: 'axis',
             axisPointer: {
               type: 'shadow' as const
             }
           },
           grid: {
             left: '3%',
             right: '3%',
             bottom: '3%',
             top: '3%',
             containLabel: true
           },
           xAxis: {
             type: 'value' as const,
             axisLine: {
               lineStyle: {
                 color: 'rgba(255, 255, 255, 0.3)'
               }
             },
             axisLabel: {
               color: 'rgba(255, 255, 255, 0.8)',
               fontSize: 12
             },
             splitLine: {
               show: false
             }
           },
           yAxis: {
             type: 'category' as const,
             data: ['市发展和改革委员会', '市科学技术局', '市监察局', '市劳动和社会保障局', '市财政局', '市城市管理行政执法局', '市政府办公厅'],
             axisLine: {
               lineStyle: {
                 color: 'rgba(255, 255, 255, 0.3)'
               }
             },
             axisLabel: {
               color: 'rgba(255, 255, 255, 0.8)',
               fontSize: 12
             },
             axisTick: {
               show: false
             }
           },
           series: [
             {
               name: '发文量',
               type: 'bar',
               barWidth: '95%',
               data: [5000, 5911, 6780, 7200, 8000, 8900, 9810],
               itemStyle: {
                 color: new echarts.graphic.LinearGradient(1, 0, 0, 0, [
                   { offset: 0, color: '#2ec7c9' },
                   { offset: 1, color: '#52e796' }
                 ]),
                 borderRadius: [0, 4, 4, 0],
               },
               label: {
                 show: true,
                 position: 'right',
                 color: '#fff',
                 fontSize: 12,
                 fontWeight: 'bold',
                 formatter: '{c}'
               }
             }
           ],
           animation: true,
           animationDuration: 1500,
           animationEasing: 'cubicOut'
         };
         chart.setOption(option);
       }
 
       // 政务新媒体年度问题汇总 柱状图
       const annualIssuesDom = document.getElementById('new-media-annual-issues');
       if (annualIssuesDom) {
         const chart = echarts.init(annualIssuesDom as HTMLDivElement);
         const option: echarts.EChartOption = {
           backgroundColor: 'rgba(0, 0, 0, 0)',
           tooltip: {
             trigger: 'axis',
             axisPointer: {
               type: 'shadow' as const
             }
           },
           grid: {
             left: '3%',
             right: '3%',
             bottom: '3%',
             top: '3%',
             containLabel: true
           },
           xAxis: {
             type: 'category' as const,
             data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
             axisLine: {
               lineStyle: {
                 color: 'rgba(255, 255, 255, 0.3)'
               }
             },
             axisLabel: {
               color: 'rgba(255, 255, 255, 0.8)',
               fontSize: 12
             },
             axisTick: {
               show: false
             }
           },
           yAxis: {
             type: 'value' as const,
             max: 5000,
             axisLine: {
               lineStyle: {
                 color: 'rgba(255, 255, 255, 0.3)'
               }
             },
             axisLabel: {
               color: 'rgba(255, 255, 255, 0.8)',
               fontSize: 12
             },
             splitLine: {
               show: false
             }
           },
           series: [
             {
               name: '问题数量',
               type: 'bar',
               barWidth: '60%',
               data: [3200, 2800, 3500, 4200, 3800, 4500, 4800, 4000, 3600, 3200, 2800, 2500],
               itemStyle: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                   { offset: 0, color: '#fbbf5e' },
                   { offset: 1, color: '#52e796' }
                 ]),
                 borderRadius: [4, 4, 0, 0],
               },
               label: {
                 show: true,
                 position: 'top',
                 color: '#fff',
                 fontSize: 12,
                 fontWeight: 'bold',
                 formatter: '{c}'
               }
             }
           ],
           animation: true,
           animationDuration: 1500,
           animationEasing: 'cubicOut'
         };
         chart.setOption(option);
       }
 
       // 政务新媒体发布数量统计 饼图
       const pieDom = document.getElementById('new-media-pie');
       if (pieDom) {
         const chart = echarts.init(pieDom as HTMLDivElement);
         const option: echarts.EChartOption = {
           backgroundColor: 'rgba(0, 0, 0, 0)',
           series: [
             {
               type: 'pie',
               radius: ['40%', '70%'],
               avoidLabelOverlap: false,
               label: {
                 show: false,
                 position: 'center'
               },
               emphasis: {
                 label: {
                   show: false
                 }
               },
               labelLine: {
                 show: false
               },
               data: [
                 { value: 33, name: '微信', itemStyle: { color: '#36cbcb' } },
                 { value: 31, name: '抖音', itemStyle: { color: '#2ec7c9' } },
                 { value: 26, name: '微博', itemStyle: { color: '#ef4444' } },
                 { value: 10, name: '其他', itemStyle: { color: '#fbbf5e' } }
               ],
               center: ['50%', '50%'],
               itemStyle: {
                 borderWidth: 2,
                 borderColor: '#0f1931'
               },
               animation: true,
               animationDuration: 1500,
               animationEasing: 'cubicOut'
             }
           ],
           graphic: [
             {
               type: 'image',
               left: '40%',
               top: '40%',
               width: 30,
               height: 30,
               z: 10,
               symbol: 'path://M24 12.07c4.97 0 9.17 4.2 9.17 9.17s-4.2 9.17-9.17 9.17S15 26.14 15 21.17 19.2 12.07 24 12.07zm0 16.2c4.08 0 7.4-3.32 7.4-7.4s-3.32-7.4-7.4-7.4-7.4 3.32-7.4 7.4 3.32 7.4 7.4 7.4zm-12.46-7.4c0 4.08 3.32 7.4 7.4 7.4s7.4-3.32 7.4-7.4c0-1.53-.36-3.04-.98-4.32l-1.46 1.46c.4 1.04.64 2.19.64 3.39 0 2.98-2.42 5.4-5.4 5.4s-5.4-2.42-5.4-5.4c0-1.2.24-2.35.64-3.39l-1.46 1.46c-.62 1.28-.98 2.79-.98 4.32z'
             }
           ]
         };
         chart.setOption(option);
       }
 
       // 问题来源分布 雷达图
       const radarDom = document.getElementById('problem-source');
       if (radarDom) {
         const chart = echarts.init(radarDom as HTMLDivElement);
         const option: echarts.EChartOption = {
           backgroundColor: 'rgba(0, 0, 0, 0)',
           radar: {
             indicator: [
               { name: '微信', max: 100 },
               { name: '微博', max: 100 },
               { name: '其他', max: 100 },
               { name: '抖音', max: 100 }
             ],
             shape: 'polygon',
             splitNumber: 5,
             splitLine: {
               lineStyle: {
                 color: 'rgba(255, 255, 255, 0.1)'
               }
             },
             axisLine: {
               lineStyle: {
                 color: 'rgba(255, 255, 255, 0.3)'
               }
             },
             axisLabel: {
               color: 'rgba(255, 255, 255, 0.8)',
               fontSize: 12
             }
           },
           series: [
             {
               name: '问题来源',
               type: 'radar' as const,
               data: [
                 {
                   value: [80, 60, 40, 70],
                   name: '发布总量'
                 },
                 {
                   value: [70, 50, 30, 60],
                   name: '一般错误'
                 },
                 {
                   value: [50, 30, 20, 40],
                   name: '严重错误'
                 }
               ],
               itemStyle: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                   { offset: 0, color: '#36cbcb' },
                   { offset: 1, color: '#2ec7c9' }
                 ])
               },
               areaStyle: {
                 color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                   { offset: 0, color: 'rgba(54, 203, 203, 0.3)' },
                   { offset: 1, color: 'rgba(46, 199, 201, 0.1)' }
                 ])
               },
               animation: true,
               animationDuration: 1500,
               animationEasing: 'cubicOut'
             }
           ]
         };
         chart.setOption(option);
       }
     }
 
     onMounted(() => {
       cancelLoading()
       handleTime()
       windowDraw()
       calcRate()
       nextTick(() => {
         initCharts()
       })
     })
 
     onUnmounted(() => {
       unWindowDraw()
       clearInterval(timeInfo.setInterval)
     })
 
     const cancelLoading = () => {
       setTimeout(() => {
         loading.value = false
       }, 500)
     }
 
     const handleTime = () => {
       timeInfo.setInterval = setInterval(() => {
         const date = new Date()
         timeInfo.dateDay = formatTime(date, 'HH: mm: ss')
         timeInfo.dateYear = formatTime(date, 'yyyy-MM-dd')
         timeInfo.dateWeek = WEEK[date.getDay()]
       }, 1000)
     }
 
     const tab = (index) => {
       tabColor.value = index
       router.push(`/tab${index}`)
     }
 
     return {
       loading,
       timeInfo,
       appRef,
       title,
       subtitle,
       moduleInfo,
       tabColor,
       tab,
       tiao,
       tiao2,
       tiao3,
       tiao4,
       tiao5,
       tiao6,
       tiao7,
       tiao8,
       tiao9,
       tiao10,
       tiao11
     }
   }
 })
 </script>
 
 <style lang="scss" scoped>
 #index {
   color: #d3d6dd;
   width: 1920px;
   height: 1080px;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   transform-origin: left top;
 
   .bg {
     width: 100%;
     height: 100%;
     padding: 16px 16px 0 16px;
     background-image: url("../../assets/pageBg.png");
     background-size: cover;
     background-position: center center;
   }
 
   // 政务新媒体更新排行TOP5表格样式
   #new-media-rank {
     background-color: rgba(10, 42, 67, 0.8);
     border-radius: 4px;
     overflow: hidden;
 
     .table-header {
       display: flex;
       background: linear-gradient(to right, #0a2a43, #1a5276);
       border-bottom: 1px solid #00a8e8;
     }
 
     .header-item {
       flex: 1;
       padding: 8px 5px;
       text-align: center;
       color: #fff;
       font-size: 14px;
       font-weight: bold;
     }
 
     .table-body {
       max-height: calc(100% - 36px);
       overflow-y: auto;
 
       /* 自定义滚动条样式 */
       &::-webkit-scrollbar {
         width: 6px;
       }
 
       &::-webkit-scrollbar-track {
         background: rgba(15, 19, 37, 0.5);
         border-radius: 3px;
       }
 
       &::-webkit-scrollbar-thumb {
         background: #00a8e8;
         border-radius: 3px;
       }
 
       &::-webkit-scrollbar-thumb:hover {
         background: #308FD1;
       }
     }
 
     .table-row {
       display: flex;
       border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 
       &:nth-child(1) .row-item {
         background-color: rgba(0, 168, 232, 0.2);
       }
 
       &:nth-child(2) .row-item {
         background-color: rgba(0, 136, 204, 0.2);
       }
 
       &:nth-child(3) .row-item {
         background-color: rgba(0, 102, 153, 0.2);
       }
 
       &:nth-child(4) .row-item {
         background-color: rgba(0, 68, 102, 0.2);
       }
 
       &:nth-child(5) .row-item {
         background-color: rgba(0, 34, 51, 0.2);
       }
     }
 
     .row-item {
       flex: 1;
       padding: 8px 5px;
       text-align: center;
       color: #d3d6dd;
       font-size: 13px;
       word-break: break-all;
     }
 
     .rank {
       color: #fff;
       border-radius: 4px;
       width: 320px;
       height: 50px;
       margin: 0 auto;
       font-weight: bold;
       background-color: #00a8e8;
     }
   }
 
   .host-body {
 
     .dv-dec-10,
     .dv-dec-10-s {
       width: 33.3%;
       height: 5px;
     }
 
     .dv-dec-10-s {
       transform: rotateY(180deg);
     }
 
     .dv-dec-8 {
       width: 200px;
       height: 50px;
     }
 
     .title {
       position: relative;
       display: flex;
       width: 500px;
       height: 100%;
       margin-top: 15px;
       text-align: center;
       background-size: 100%;
       background-repeat: no-repeat;
       background-image: url("../../assets/logo.0a9934bd.png");
 
       .title-text {
         font-size: 24px;
         position: absolute;
         bottom: 0;
         left: 50%;
         transform: translate(-50%);
       }
     }
 
     .aside-width {
       width: 100%;
       margin-top: 15px;
       display: flex;
       align-items: center;
       justify-content: space-around;
     }
 
     .react-right {
       &.react-l-s {
         text-align: right;
         width: 500px;
       }
 
       font-size: 18px;
       width: 300px;
       line-height: 50px;
       text-align: center;
       transform: skewX(-45deg);
 
       .text {
         display: inline-block;
         transform: skewX(45deg);
       }
     }
 
     .body-box {
       .content-box {
         width: 100%;
         height: 100%;
         margin-top: 20px;
 
         .semi-enclosed-layout {
           display: flex;
           height: 800px;
           gap: 10px;
 
           .left-sidebar,
           .right-sidebar {
             width: 20%;
             display: flex;
             flex-direction: column;
             gap: 10px;
 
             .chart-module {
               flex: 1;
               min-height: 0;
 
               .chart-title {
                 text-align: left;
                 font-size: 16px;
                 font-weight: bold;
                 padding: 8px 15px;
                 color: #fff;
                 background: rgba(15, 19, 37, 0.6);
                 border-bottom: 1px solid rgba(0, 168, 232, 0.5);
               }
 
               .chart-container {
                 height: calc(100% - 40px);
                 padding: 10px;
                 display: flex;
                 flex-direction: column;
 
                 .stat-grid {
                   display: grid;
                   grid-template-columns: repeat(2, 1fr);
                   gap: 5px;
 
                   .stat-row {
                     display: flex;
                     align-items: center;
                     background-color: rgba(15, 19, 37, 0.5);
                     padding: 5px 10px;
 
                     .stat-item {
                       color: #d3d6dd;
                       font-size: 14px;
                       flex: 1;
                     }
 
                     .stat-value {
                       color: #00a8e8;
                       font-size: 14px;
                       font-weight: bold;
                       text-align: right;
                     }
                   }
                 }
 
                 .bar-chart,
                 .pie-chart,
                 .radar-chart {
                   width: 100%;
                   height: 100%;
                   display: flex;
                   justify-content: center;
                   align-items: center;
                   padding: 5px;
                 }
 
                 .table-container {
                   width: 100%;
                   height: 100%;
 
                   .table-header {
                     display: flex;
                     background-color: rgba(15, 19, 37, 0.8);
                     border-bottom: 1px solid #00a8e8;
 
                     .header-item {
                       flex: 1;
                       padding: 8px 5px;
                       text-align: center;
                       color: #fff;
                       font-size: 13px;
                       font-weight: bold;
                     }
                   }
 
                   .table-body {
                     max-height: calc(100% - 36px);
                     overflow-y: auto;
 
                     /* 自定义滚动条样式 */
                     &::-webkit-scrollbar {
                       width: 6px;
                     }
 
                     &::-webkit-scrollbar-track {
                       background: rgba(15, 19, 37, 0.5);
                       border-radius: 3px;
                     }
 
                     &::-webkit-scrollbar-thumb {
                       background: #00a8e8;
                       border-radius: 3px;
                     }
 
                     &::-webkit-scrollbar-thumb:hover {
                       background: #308FD1;
                     }
 
                     .table-row {
                       display: flex;
                       border-bottom: 1px solid rgba(255, 255, 255, 0.05);
 
                       .row-item {
                         flex: 1;
                         padding: 8px 5px;
                         text-align: center;
                         color: #d3d6dd;
                         font-size: 13px;
                         word-break: break-all;
                       }
 
                       .status {
                         color: #ff5252;
                       }
                     }
                   }
                 }
 
                 .chart-row {
                   display: flex;
                   gap: 10px;
                   height: 200px;
                 }
 
                 .chart-col {
                   flex: 1;
                   display: flex;
                   flex-direction: column;
                   justify-content: center;
                 }
 
                 .stat-list {
                   display: flex;
                   flex-direction: column;
                   gap: 10px;
                   padding: 10px;
                 }
 
                 .stat-item {
                   color: #d3d6dd;
                   font-size: 14px;
                 }
 
                 .stat-card {
                   display: flex;
                   flex-direction: column;
                   gap: 15px;
                   padding: 10px;
                 }
 
                 .card-item {
                   display: flex;
                   align-items: center;
                   gap: 8px;
                 }
 
                 .icon {
                   color: #36cbcb;
                   font-size: 18px;
                 }
 
                 .label {
                   color: #d3d6dd;
                   font-size: 14px;
                   flex: 1;
                 }
 
                 .value {
                   color: #fff;
                   font-size: 14px;
                   font-weight: bold;
                 }
 
                 .card-item:nth-child(2) .icon {
                   color: #fbbf5e;
                 }
 
                 .card-item:nth-child(3) .icon {
                   color: #ef4444;
                 }
               }
             }
           }
 
           .main-content {
             width: 60%;
             display: flex;
             flex-direction: column;
             gap: 10px;
 
             .main-indicator {
               flex: 3;
               min-height: 0;
 
               .main-chart-container {
                 height: calc(100% - 50px);
                 padding: 15px;
                 display: flex;
                 flex-direction: column;
 
                 .chart-title {
                   text-align: center;
                   color: #fff;
                   font-size: 20px;
                   font-weight: bold;
                   margin-bottom: 20px;
                 }
 
                 .chart-content {
                   flex: 1;
                   display: flex;
                   flex-direction: column;
                   justify-content: space-between;
                   align-items: center;
 
                   .info-publish-summary {
                     color: #fff;
                     font-size: 16px;
                     margin-bottom: 15px;
                   }
 
                   .number-block-container {
                     display: flex;
                     justify-content: center;
                     align-items: center;
                     gap: 8px;
                     margin-bottom: 20px;
                   }
 
                   .number-block {
                     width: 40px;
                     height: 60px;
                     background-color: #1e3a8a;
   
                     border-radius: 6px;
                     display: flex;
                     justify-content: center;
                     align-items: center;
                     color: #ffffff;
                     font-size: 24px;
                     font-weight: bold;
                     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
                     transition: transform 0.2s ease;
                   }
 
                   .number-block:hover {
                     transform: translateY(-2px);
                     box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
                   }
 
                   .time-periods {
                     display: flex;
                     justify-content: space-around;
                     width: 100%;
 
                     .period-item {
 
                       display: flex;
                       flex-direction: column;
                       align-items: center;
                       width: 150px;
                       height: 100px;
 
                       .period-label {
                         margin-top: 10px;
                         margin-left: 10px;
                         color: #d3d6dd;
                         font-size: 14px;
                         margin-bottom: 8px;
                       }
 
                       .period-value {
                         color: #fff;
                         font-size: 18px;
                         font-weight: bold;
 
                         padding: 8px 16px;
                         border-radius: 6px;
                         min-width: 100px;
                         text-align: center;
                       }
                     }
                   }
                 }
               }
             }
 
             .secondary-indicators {
               flex: 1;
               min-height: 0;
               display: flex;
               gap: 10px;
 
               .secondary-indicator {
                 flex: 1;
                 min-height: 0;
 
                 .secondary-chart-container {
                   height: 200px;
                   padding: 10px;
                   display: flex;
                   flex-direction: column;
 
                   .chart-content {
                     height: 100%;
                     width: 100%;
 
                     .bar-chart {
                       width: 100%;
                       height: 100%;
                       margin-top: 10px;
                     }
                   }
                 }
               }
             }
           }
         }
       }
     }
   }
 
 }
 </style>